<template>
  <div class="systemDialog">
    <div class="title-row">风光一体化防沙治沙</div>
    <el-descriptions class="content-descriptions">
      <el-descriptions-item label="项目编号">风光一体化防沙治沙</el-descriptions-item>
      <el-descriptions-item label="立项日期">2022-01-02</el-descriptions-item>
      <el-descriptions-item label="项目部门">工程管理部</el-descriptions-item>
      <el-descriptions-item label="项目类型">工程项目</el-descriptions-item>
      <el-descriptions-item label="项目负责人">王XX</el-descriptions-item>
      <el-descriptions-item label="项目状态">执行</el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="activeName" class="tab-row">
      <el-tab-pane label="进度监控" name="1">
        <el-row>
          <el-col :span="12">
            <div class="tab-pane-row">
              <div class="title-small">项目进度分析</div>
              <div style="margin: 20px">
                <div><span style="font-size: 20px">统计项：</span><span>数量</span></div>
                <schedule-analysis :activeName="activeName"></schedule-analysis>
                <div style="margin-top: 10px; display: flex;justify-content: center;margin-left: 30%;margin-right: 30%">
                  <el-table :data="progressData" height="100" border :header-cell-style="{backgroundColor: '#e7f6f3'}">
                    <el-table-column prop="projectName" label="项目名称" width="180"></el-table-column>
                    <el-table-column prop="todo" label="待办"></el-table-column>
                    <el-table-column prop="dong" label="完成"></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="tab-pane-row" style="margin-left: 10px">
              <div class="title-small">项目进度分析</div>
              <div class="content-progress">
                <el-progress type="circle" :percentage="25" define-back-color="#8be1c7" color="#18be6b" :format="format"
                             :width="100" style="margin-left: 10%"></el-progress>
                <div style="margin: 0 20px;width: 40%">
                  <div style="border-bottom: 1px solid #e7eff3;padding: 10px">
                    <span>完成进度</span>
                    <span style="color: #FEC171;float:right;">10.0</span>
                  </div>
                  <div style="padding: 10px;">
                    <span>目标值</span>
                    <span style="color: #FEC171;float:right;">100</span>
                  </div>
                </div>
                <div>
                  <div class="border-box">
                    <div class="font-class">计划开始</div>
                    <div class="num-class">2022-01-04</div>
                  </div>
                  <div class="border-box">
                    <div class="font-class">计划结束</div>
                    <div class="num-class">2022-02-25</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="成本控制" name="2">
        <el-row>
          <el-col :span="12">
            <div class="tab-pane-row">
              <div class="title-small">预算执行</div>
              <budget-enforcement :activeName="activeName"></budget-enforcement>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="tab-pane-row" style="margin-left: 10px">
              <div class="title-small">成本构成</div>
              <cost-composition :activeName="activeName"></cost-composition>
            </div>
          </el-col>
        </el-row>
        <el-row class="tab-pane-row">
          <div class="title-small">预算使用情况</div>
          <el-table :data="budgetData" style="width: 100%" height="260"
                    :header-cell-style="{backgroundColor: '#e7f6f3'}">
            <el-table-column prop="type" label="费用类型"></el-table-column>
            <el-table-column prop="budget" label="预算金额"></el-table-column>
            <el-table-column prop="amountPaid" label="支出金额"></el-table-column>
            <el-table-column prop="enRoute" label="在途金额"></el-table-column>
            <el-table-column prop="avail" label="可用金额"></el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="相关方管理" name="3">
        <el-row class="tab-pane-row">
          <div class="title-small">管理中</div>
          <el-col :span="12" v-for="(item,index) in glData" :key="index">
            <div class="content-small-two">
              <div class="descriptions-title"><span
                style="border-radius: 100%;width: 7px; height: 7px; display: block;background: #18be6b;margin-right: 5px"></span>{{ item.name }}
              </div>
              <div class="descriptions-class">
                <div>
                  <div>职务：{{ item.zhiwu }}</div>
                  <div>权利影响：{{ item.quanli }}</div>
                </div>
                <div>
                  <div>管理策略：{{ item.celue }}</div>
                  <div>关心程度：{{ item.level }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="tab-pane-row">
          <div class="title-small">参与度评估矩阵</div>
          <el-table :data="involvementData" style="width: 100%" height="260"
                    :header-cell-style="{backgroundColor: '#e7f6f3'}">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="post" label="职务"></el-table-column>
            <el-table-column prop="unacquaintance" label="不知晓"></el-table-column>
            <el-table-column prop="boycott" label="抵制"></el-table-column>
            <el-table-column prop="neutrality" label="中立"></el-table-column>
            <el-table-column prop="support" label="支持"></el-table-column>
            <el-table-column prop="leadership" label="领导"></el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="风险监控" name="4">
        <el-row>
          <div class="tab-pane-row">
            <div class="title-small">风险登记册</div>
            <el-col :span="24" style="background-color: #ffffff">
              <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="项目名称">
                      <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="风险状态">
                      <el-select v-model="formData.sel1" multiple clearable placeholder="请选择..." style="width: 100%;">
                        <el-option label="未发生" value="0"></el-option>
                        <el-option label="应对中" value="1"></el-option>
                        <el-option label="不存在" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="风险类型">
                      <el-select v-model="formData.sel3" multiple clearable placeholder="请选择..." style="width: 100%;">
                        <el-option label="质量风险" value="0"></el-option>
                        <el-option label="成本风险" value="1"></el-option>
                        <el-option label="人事风险" value="2"></el-option>
                        <el-option label="设计风险" value="3"></el-option>
                        <el-option label="环境风险" value="4"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" style="text-align: right;">
                    <el-button type="primary">筛选</el-button>
                    <el-button @click="resetForm">重置</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="24" style="background-color: #ffffff">
              <el-row style="display: inline-flex;width: 100%;">
                <el-col :span="4" :md="5" style="padding: 10px;">
                  <el-input v-model="treeSearch" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
                  <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps"
                           @node-click="handleNodeClick" default-expand-all></el-tree>
                </el-col>
                <el-col :span="20" :md="19">
                  <el-table :data="customData" style="width: 100%" height="360"
                            :header-cell-style="{backgroundColor: '#e7f6f3'}">
                    <el-table-column prop="date" label="预计发生"></el-table-column>
                    <el-table-column prop="name" label="风险名称"></el-table-column>
                    <el-table-column prop="yxcd" label="影响程度"></el-table-column>
                    <el-table-column prop="rate" label="发生概率"></el-table-column>
                    <el-table-column prop="level" label="风险等级"></el-table-column>
                    <el-table-column prop="state" label="风险状态"></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="质量控制" name="5">
        <el-row>
          <div class="tab-pane-row">
            <div class="title-small">问题列表</div>
            <el-table :data="quetionData" style="width: 100%" height="260"
                      :header-cell-style="{backgroundColor: '#e7f6f3'}">
              <el-table-column prop="date" label="新增日期"></el-table-column>
              <el-table-column prop="name" label="问题名称"></el-table-column>
              <el-table-column prop="type" label="问题类型"></el-table-column>
              <el-table-column prop="state" label="问题状态"></el-table-column>
              <el-table-column prop="shuoming" label="处理说明"></el-table-column>
            </el-table>
          </div>
        </el-row>
        <el-row class="tab-pane-row">
          <div class="title-small">奖惩通报</div>
          <el-col :span="12">
            <div class="content-small-two">
              <div class="descriptions-title">
                <span
                  style="border-radius: 100%;width: 7px; height: 7px; display: block;background: #18be6b;margin-right: 5px"></span>风光一体化防沙治沙
              </div>
              <div class="descriptions-class">
                <div>
                  <div>通报日期：2022-02-09</div>
                  <div>奖惩类型：惩罚</div>
                </div>
                <div>
                  <div>奖惩对象：王XX</div>
                  <div>奖惩金额：500.000</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="合同管理" name="6">
        <el-row class="tab-pane-row">
          <div class="title-small">合同收款情况</div>
          <div class="content-small-one">
            <div>
              <div class="font-class">签订日期</div>
              <div class="num-class">2022-01-03</div>
            </div>
            <el-divider direction="vertical" class="divider-class"></el-divider>
            <div>
              <div class="font-class">合同金额</div>
              <div class="num-class">800，000.00</div>
            </div>
            <el-divider direction="vertical" class="divider-class"></el-divider>
            <div>
              <div class="font-class">收款金额</div>
              <div class="num-class">700，000.00</div>
            </div>
            <el-divider direction="vertical" class="divider-class"></el-divider>
            <div>
              <div class="font-class">未收金额</div>
              <div class="num-class">100，000.00</div>
            </div>
          </div>
        </el-row>
        <el-row class="tab-pane-row">
          <div class="title-small">合同付款情况</div>
          <el-col :span="12">
            <div class="content-small-two">
              <div class="descriptions-title">
                <span
                  style="border-radius: 100%;width: 7px; height: 7px; display: block;background: #18be6b;margin-right: 5px"></span>合同
              </div>
              <div class="descriptions-class">
                <div>
                  <div>合同编号：CGHT202201001</div>
                  <div>合同金额：30,000.00</div>
                </div>
                <div>
                  <div>付款金额：27,000.00</div>
                  <div>未付金额：3,000.000</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="人员协同" name="7">
        <el-row>
          <el-col :span="12">
            <div class="tab-pane-row">
              <div class="title-small">资源投入</div>
              <el-table :data="tableData" style="width: 100%" height="260"
                        :header-cell-style="{backgroundColor: '#e7f6f3'}">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="role" label="项目角色"></el-table-column>
                <el-table-column prop="num" label="2022年01月"></el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="tab-pane-row" style="margin-left: 10px">
              <div class="title-small">工作报告</div>
              <el-table :data="reportData" style="width: 100%;" height="260"
                        :header-cell-style="{backgroundColor: '#e7f6f3'}">
                <el-table-column prop="date" label="报告日期"></el-table-column>
                <el-table-column prop="type" label="报告类型"></el-table-column>
                <el-table-column prop="name" label="报告人"></el-table-column>
                <el-table-column prop="num" label="工时"></el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div class="tab-pane-row">
            <div class="title-small">工时排行</div>
            <el-select v-model="selectProject" placeholder="请选择" style="margin-left: 15px">
              <el-option v-for="item in projectList" :key="item.value" :label="item.name"
                         :value="item.value"></el-option>
            </el-select>
            <manhour-rank :activeName="activeName"></manhour-rank>
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="变更控制" name="8">
        <el-row>
          <div class="tab-pane-row">
            <div class="title-small">变更日志</div>
            <el-table :data="changeData" style="width: 100%;" height="560"
                      :header-cell-style="{backgroundColor: '#e7f6f3'}">
              <el-table-column prop="date" label="申请日期"></el-table-column>
              <el-table-column prop="type" label="业务类型"></el-table-column>
              <el-table-column prop="name" label="申请人"></el-table-column>
              <el-table-column prop="num" label="单据编号"></el-table-column>
              <el-table-column prop="beizhu" label="备注"></el-table-column>
              <el-table-column prop="projectName" label="项目名称"></el-table-column>
            </el-table>
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="项目文件" name="9">
        <div class="tab-pane-row">
          <el-empty description="暂无数据" style="height: 560px;"></el-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import UserHours from "@/views/leader/components/userHours";
import Payment from "@/views/leader/components/payment";
import ScheduleAnalysis from "@/views/leader/components/scheduleAnalysis";
import BudgetEnforcement from "@/views/leader/components/budgetEnforcement";
import CostComposition from "@/views/leader/components/costComposition";
import ManhourRank from "@/views/leader/components/manhourRank";

export default {
  name: "systemDialog",
  components: {ManhourRank, CostComposition, BudgetEnforcement, ScheduleAnalysis, Payment, UserHours},
  data() {
    return {
      activeName: '1',
      tabList: [
        {label: '进度监控', name: '1'},
        {label: '成本控制', name: '2'},
        {label: '相关方管理', name: '3'},
        {label: '风险监控', name: '4'},
        {label: '质量控制', name: '5'},
        {label: '合同管理', name: '6'},
        {label: '人员协同', name: '7'},
        {label: '变更控制', name: '8'},
        {label: '项目文件', name: '9'},
      ],
      progressData: [
        {projectName: '风光一体化防沙治沙', todo: '19', dong: '10',}
      ],
      budgetData: [
        {type: '人工成本', budget: '60，000.00', amountPaid: '20,020.00', enRoute: '0.00', avail: '39,980.00'},
        {type: '商务费用', budget: '30，000.00', amountPaid: '10,000.00', enRoute: '200.00', avail: '18,000.00'},
        {type: '差旅费用', budget: '10，000.00', amountPaid: '2,000.00', enRoute: '100.00', avail: '7,980.00'},
        {type: '材料成本', budget: '80，000.00', amountPaid: '0.00', enRoute: '0.00', avail: '8,900.00'},
      ],
      involvementData: [
        {name: '王XX', post: '助理', unacquaintance: '', boycott: '', neutrality: 'C', support: 'D', leadership: ''},
        {name: '李XX', post: '财务总监', unacquaintance: '', boycott: '', neutrality: 'C', support: 'D', leadership: ''},
        {name: '吴XX', post: '项目经理', unacquaintance: '', boycott: '', neutrality: 'DC', support: '', leadership: ''},
        {name: '王XX', post: '项目经理', unacquaintance: '', boycott: '', neutrality: '', support: 'DC', leadership: ''},
      ],
      glData: [
        {name: '王XX', zhiwu: '助理', celue: '重点管理', quanli: '8级', level: '很关心'},
        {name: '李XX', zhiwu: '财务总监', celue: '重点管理', quanli: '级', level: '较关心'},
        {name: '吴XX', zhiwu: '项目经理', celue: '重点管理', quanli: '8级', level: '很关心'},
        {name: '王XX', zhiwu: '项目经理', celue: '重点管理', quanli: '8级', level: '非常关心'},
      ],
      formData: {},
      treeSearch: '',
      showSearch: true,
      treeData: [
        {
          label: '风险状态',
          children: [
            {label: '未发生', id: 0},
            {label: '应对中', id: 1},
            {label: '不存在', id: 2}
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contentIdx: 0,
      customData: [
        {name: '', type: '', date: '2022-01-23', state: '已解决', shuoming: ''},
      ],
      quetionData: [
        {name: '', type: '', date: '2022-01-23', state: '已解决', shuoming: ''},
        {name: '', type: '', date: '2022-01-23', state: '未处理', shuoming: ''},
      ],
      tableData: [
        {name: '朱XX', role: '项目成员', num: '94.0'},
        {name: '王XX', role: '项目负责人', num: '25.0'},
      ],
      reportData: [
        {name: '王XX', type: '周报', date: '2022-01-23', num: '34'},
        {name: '王XX', type: '日报', date: '2022-01-03', num: '6'},
        {name: '王XX', type: '日报', date: '2022-01-11', num: '8'},
        {name: '王XX', type: '日报', date: '2022-01-13', num: '12'},
        {name: '王XX', type: '日报', date: '2022-01-18', num: '8'},
      ],
      projectList: [
        {name: '风光一体化防沙治沙', value: '1'},
        {name: '三北六期', value: '2'},
        {name: '蚂蚁森林', value: '3'},
        {name: '蓝旗机器人造林', value: '4'},
      ],
      selectProject: '1',
      changeData: [
        {
          name: '王XX',
          type: '计划变更',
          date: '2022-01-23',
          num: '计划变更-20220123001',
          beizhu: '计划延后两天',
          projectName: '风光一体化防沙治沙'
        },
        {
          name: '王XX',
          type: '计划变更',
          date: '2022-01-18',
          num: '计划变更-20220118001',
          beizhu: '计划任务延后一天',
          projectName: '风光一体化防沙治沙'
        },
        {
          name: '王XX',
          type: '计划变更',
          date: '2022-01-28',
          num: '计划变更-20220128001',
          beizhu: '计划需提前完成',
          projectName: '风光一体化防沙治沙'
        },
      ],
    }
  },
  mounted() {
  },
  methods: {
    format(percentage) {
      return '未完成\n' + '90.0';
    },
    resetForm() {
      this.formData = {};
    },
    handleNodeClick(data) {
      this.contentIdx = data.id;
    },
  }
}
</script>

<style scoped lang="scss">
.title-row {
  color: #11A389;
  font-size: 23px;
  font-weight: 600;
  margin: 0 20px;
}

.content-descriptions {
  margin: 20px;
}

.systemDialog {
  ::v-deep {
    .el-tabs__header {
      padding: 10px 0 0 40px !important;
    }

    .el-tabs__nav-wrap::after {
      height: 0 !important;
    }
  }
}

.tab-row {
  background-color: #f5f7fa;
}

.tab-pane-row {
  margin-bottom: 15px;
  border-top: 1px solid #8be1c7;
  background-color: #ffffff;
}

.title-small {
  color: #11A389;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 15px;
}

.content-progress {
  display: flex;
  align-items: center;
  height: 266px;
  margin: 0 30px;
}

.border-box {
  border: 1px solid #e7eff3;
  padding: 10px 20px;
  margin: 5px 0;
}

.content-small-one {
  margin: 0 15px;
  margin-bottom: 15px;
  border: 1px solid #f5f7fa;
  border-radius: 4px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100px;
}

.content-small-two {
  margin: 0 15px;
  margin-bottom: 15px;
  background-color: #d7f0ea;
  border: 1px solid #42b983;
  border-radius: 6px;
  height: 100px;
}

.font-class {
  text-align: center;
}

.num-class {
  font-size: 21px;
  color: #18be6b;
  margin-top: 3px;
}

.divider-class {
  height: 40px;
}

.descriptions-title {
  color: #18be6b;
  font-weight: 600;
  font-size: 15px;
  margin: 12px;
  display: flex;
  align-items: center;
}

.descriptions-class {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>
